<template>
  <div class="ten_box">
    <m-header modile-title="提示弹窗" go-back="true"></m-header>
    <button @click="btn">点击我弹出提示弹窗</button>


    <div class="box_main">
      <div id="name">名字显示处</div>
      <!--<div style="font-size:40px;color:#ffaadd">{{showdata.name}}-&#45;&#45;{{showdata.num}}</div>-->
      <button id="btns" @click="beginBtn">{{flag?'开始':'结束'}}</button>
      <ul id="showName"></ul>
    </div>
    <div>{{selectName}}</div>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
    .box_main {
      margin-top: 30px;
      width: 100%;
      background: #fff7cc;
      #name {
        width: 600px;
        height: 250px;
        margin: 10px auto;
        text-align: center;
        line-height: 250px;
        font-size: 40px;
        color: red;
      }
      button {
        display: block;
        width: 100px;
        height: 50px;
        font-size: 25px;
        text-align: center;
        margin: 200px auto 0;
      }
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import {MessageBox} from 'mint-ui'

  var timer = null;
  export default {
    data() {
      return {
        arrs: [
          {name: '李汶翰', num: 1},
          {name: '李振林', num: 2},
          {name: '范丞丞', num: 3},
          {name: '管栎', num: 4},
          {name: '嘉羿', num: 5},
          {name: '黄明昊', num: 6},
          {name: '林彦俊', num: 7},
          {name: '林一', num: 8},
          {name: '翟潇闻', num: 9},
          {name: '何洛洛', num: 10},
          {name: '任豪', num: 11},
        ],
        flag: true,
        x: 0,
        showdata: {},
        selectName: []
        // timer: {
        //   type: Number
        // }
      }
    },
    created() {
    },
    methods: {
      btn() {
        MessageBox.confirm('', {
          title: '提示',
          message: '确认取消吗？',
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(action => {
          console.log(23);
          if (action == 'confirm') {
            console.log('点击确认');
          }
        }).catch(error => {
          if (error == 'cancel') {
            console.log('点击取消');
          }
        })
      },
      beginBtn() {
        var divs = document.getElementById('name');
        var that = this;
        if (that.flag) {
          if (this.arrs.length) {
            timer = setInterval(function () {
              // 随机
              that.x++;
              if (that.x >= that.arrs.length - 1) {
                that.x = 0;
              }
              // that.showdata = that.arrs[that.x];
              divs.innerHTML = that.arrs[that.x].name + '---编号：' + that.arrs[that.x].num;
            }, 100)
          } else {
            divs.innerHTML = '没有帅哥啦';
          }
        } else {
          if (this.arrs.length) {
            var names = []
            // 抽选出来的人显示到页面上
            var ulName = document.getElementById('showName');
            ulName.innerHTML += `<li>` + this.arrs[this.x].name + `</li>`
            names.push(this.arrs[this.x]);
            for (var i = 0; i < names.length; i++) {
              // console.log(names[i])
              this.selectName.push(names[i].name)
            }
          }
          clearInterval(timer);
          this.arrs.splice(this.x, 1)
        }
        that.flag = !that.flag;
      }
    },
    components: {
      mHeader
    }
  }
</script>
